<template>
    <el-dialog :title="title" :visible="visible" width="70%" @close="handleClose">
        <!-- 表格区域 -->
        <el-table :data="tableData" border stripe v-loading="loading" height="400px" style="width: 100%">
            <el-table-column prop="name" label="店铺名"></el-table-column>
            <el-table-column prop="userAvatar" label="店铺LOGO">
                <template slot-scope="{ row }">
                    <el-image style="width: 80px; height: 80px" :src="row.logo | filter_img"
                        :preview-src-list="[row.logo]">
                    </el-image>
                </template>

            </el-table-column>
            <el-table-column prop="address" label="店铺地址"></el-table-column>
            <el-table-column prop="contact_name" label="店铺联系人"></el-table-column>
            <el-table-column prop="contact_phone" label="联系人电话"></el-table-column>
            <el-table-column prop="contact_phone" label="店铺状态"></el-table-column>
            <el-table-column prop="status" label="店铺状态" width="120">
                <template slot-scope="{ row }">
                    <el-tag :type="row.status ? 'success' : 'info'">
                        {{ row.status_text }}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>

        <!-- 操作按钮 -->
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleClose">关闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { IMG_URL } from '@/utils/utils';
import { couponUserList, getMerchantCategoryMerchantsList } from '../api';

export default {
    name: 'TableDialog',
    props: {
        title: {
            type: String,
            default: '数据列表'
        },
        visible: {
            type: Boolean,
            default: false
        },
        category_id: {
            type: String | Number,
            default: '',
        }
    },
    data() {
        return {
            dialogVisible: this.visible,
            loading: false,
            searchForm: {
                keyword: '',
                status: ''
            },
            statusOptions: [
                { value: '0', label: '未使用' },
                { value: '1', label: '已使用' },
                { value: '2', label: '已过期' }
            ],
            tableData: [],
            page: 1,
            page_size: 10,
            total: 0
        }
    },
    watch: {
        category_id() {
            this.fetchData()
        }
    },
    methods: {
        // 获取表格数据
        fetchData() {
            this.loading = true;
            getMerchantCategoryMerchantsList({category_id:this.category_id}).then(res => {
                this.tableData = res;
                // .list.map(i => ({
                //     ...i,
                //     userName: i.user.nickname,
                //     userAvatar: IMG_URL + i.user.avatar,
                //     userPhone: i.user.phone || '暂无'
                // }));

            }).catch(() => {

            }).finally(() => {
                this.loading = false
            })
        },

        // 搜索
        handleSearch() {
            this.page = 1
            this.fetchData()
        },

        // 分页大小改变
        handleSizeChange(val) {
            this.page_ize = val
            this.fetchData()
        },

        // 当前页改变
        handleCurrentChange(val) {
            this.page = val
            this.fetchData()
        },

        // 关闭弹窗
        handleClose() {
            this.$emit('update:visible', false)
            this.$emit('close')
        },

        // 获取状态文本
        getStatusText(data) {
            if (data.use_time) {
                return '已使用'
            } else if (data.is_expired) {
                return '已过期'
            } else {
                return '未使用'
            }
        },

        // 获取状态标签类型
        getStatusTagType(data) {
            if (data.use_time) {
                return ''
            } else if (data.is_expired) {
                return 'info'
            } else {
                return 'success'
            }
        }
    }
}
</script>

<style scoped>
.search-container {
    margin-bottom: 20px;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}

.dialog-footer {
    text-align: right;
}

.el-table {
    margin-top: 20px;
}

.el-form-item {
    margin-bottom: 0;
}
</style>